<template>
	<u-list :height="screenHeight">
	<view>
		<!-- 身份证识别 -->
		<view class="id-discern-box" @click="discern">
			<view class="id-discern-view">
				<view class="discern-id">
					<u-icon name="plus-people-fill" color="#41b6ff" size="50"></u-icon>
				</view>
				<view class="discern-text">
					身份证智能识别
				</view>
			</view>
		</view>
		<!-- 添加表单 -->
		<view class="info-form">
			<u-form labelPosition="left" ref="form" :rules="rules" :model="HPVForm">
				<u-form-item label="姓名:" borderBottom prop="userInfo.name">
					<u--input placeholder="请输入姓名" border="none" v-model="HPVForm.userInfo.name"></u--input>
				</u-form-item>
				
				<u-form-item label="性别:" borderBottom @click="sexShow = true">
					<u--input disabled disabledColor="#ffffff" v-model="HPVForm.userInfo.sex" placeholder="请选择性别" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>	
				<u-form-item label="成员关系:" labelWidth='auto' borderBottom @click="memberShow = true">
					<u--input disabled disabledColor="#ffffff" v-model="HPVForm.userInfo.memberRelation" placeholder="请选择成员关系" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="出生日期:" labelWidth="70" borderBottom @click="birthdayDataShow = true">
					<u--input disabled disabledColor="#ffffff" v-model="HPVForm.userInfo.birthdayData" placeholder="请选择出生日期" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="手机号:" labelWidth="60" borderBottom prop="userInfo.phone">
					<u--input placeholder="请输入手机号" border="none" v-model="HPVForm.userInfo.phone"></u--input>
				</u-form-item>
				<u-form-item label="身份证:" labelWidth="60" borderBottom prop="userInfo.userId" ref="item1">
					<u--input placeholder="请输入身份证" border="none" v-model="HPVForm.userInfo.userId"></u--input>
				</u-form-item>
			</u-form>
		</view>
		<!-- 底部按钮 -->
		<view class="sub-box">
			<view class="sub-btn"><u-button type="primary" @click="cancelBtn" color="#9eceff" text="取消"></u-button></view>
			<view class="sub-btn"><u-button type="primary" @click="goAddPatient" text="确认添加"></u-button></view>
		</view>
		<!-- 性别弹框 -->
		<u-action-sheet :show="sexShow" :actions="sexActions" title="请选择性别" @close="sexShow = false" @select="sexSelect"></u-action-sheet>
		<!-- 成员弹框 -->
		<u-action-sheet :show="memberShow" :actions="memberActions" title="请选择成员关系" @close="memberShow = false" @select="memberSelect"></u-action-sheet>
		<!-- 出生日期弹框 -->
			<u-datetime-picker
				:minDate="-28800000"
				@close="birthdayDataClose"
				@cancel="birthdayDataCancel"
				@confirm="birthdayDataConfirm"
				closeOnClickOverlay
				:maxDate="1667577600000"
				:show="birthdayDataShow"
				mode="date"
			></u-datetime-picker>
		</view>
		</u-list>
	</view>
	</u-list>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				// 页面高度
				screenHeight: 0,
				// 弹框的显示
				memberShow:false,
				sexShow: false,
				birthdayDataShow: false,
				// 表单的值
				HPVForm: {
					userInfo: {
						name: '',
						userId: '',
						sex: '',
						memberRelation:"",
						birthdayData: '',
						phone: ''
					}
				},// 校验规则
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.userId': {
					type: 'string',
					min: 18,
					max: 18,
					required: true,
					message: '请填写正确的身份证号码',
					trigger: ['blur', 'change']
				},
				'userInfo.phone': {
					type: 'string',
					min: 11,
					max: 11,
					required: true,
					message: '请填写正确的手机号码',
					trigger: ['blur', 'change']
				}
			},
			// 性别选项
			sexActions: [
				{
					name: '男'
				},
				{
					name: '女'
				}
			],
			memberActions:[{name:'本人'},{name:'父母'},{name:'姐弟'},{name:'亲子'}],
			};
		},
		methods:{
			//选择年龄
			sexSelect(e) {
				this.HPVForm.userInfo.sex = e.name;
				// this.$refs.form1.validateField('userInfo.sex');
			},
			memberSelect(e){
				this.HPVForm.userInfo.memberRelation = e.name;
			},
			// 出生日期的方法操作
			birthdayDataClose() {
				this.birthdayDataShow = false;
			},
			birthdayDataCancel() {
				this.birthdayDataShow = false;
			},
			birthdayDataConfirm(e) {
				this.HPVForm.userInfo.birthdayData = moment(e.value).format('YYYY-MM-DD');
				this.birthdayDataShow = false;
			},
			// 提交表单数据
			submitData() {
				this.$refs.form
					.validate()
					.then(res => {
						uni.$u.toast('校验通过');
					})
					.catch(errors => {
						uni.$u.toast('校验失败');
					});
			},
			// 取消按钮
			cancelBtn() {
				uni.navigateBack({ delta: 1 });
			}
		},
		mounted() {
			//获取页面高度
			this.screenHeight = uni.getSystemInfoSync().windowHeight - 60; //获取当前页面的高度
		}
	}
</script>

<style lang="less">
	page{
	  background-color: #fafafa;
	}
.id-discern-box{
	padding: 20rpx;
	.id-discern-view{
		height: 200rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		.discern-id{
			margin-right: 26rpx;
		}
		.discern-text{
			font-size: 36rpx;
		}
	}
}
// 表单
.info-form {
	background-color: #ffffff;
	padding: 10rpx;
	margin: 20rpx 0;
	.u-form-item {
		margin: 14rpx 0;
	}
}
// 底部按钮
.sub-box {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1rpx #f5f5f5 solid;
	padding: 0 26rpx;
	height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	.sub-btn {
		width: 44%;
	}
}
</style>
